<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店系统插件配置</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .plugin-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .plugin-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .plugin-card.selected {
            border-color: #0d6efd;
            background-color: rgba(13, 110, 253, 0.05);
        }
        .plugin-icon {
            width: 64px;
            height: 64px;
            margin-right: 15px;
        }
        .config-section {
            display: none;
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background-color: #f8f9fa;
        }
        .tab-content {
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <!-- 删除标签页导航，改为简单标题和下载按钮 -->
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>酒店系统插件配置中心</h2>
            
            <!-- 工作站下载按钮 -->
            <button class="btn btn-primary" type="button" onclick="downloadWorkstation('windows')">
                <i class="bi bi-download"></i> 下载工作站软件
            </button>
        </div>
        
        <!-- 插件管理内容 -->
        <div class="card">
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h4>可用插件</h4>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="搜索插件..." id="pluginSearch">
                            <button class="btn btn-outline-secondary" type="button">搜索</button>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group">
                            <button class="btn btn-primary" id="savePluginConfig">保存配置</button>
                            <button class="btn btn-outline-secondary" id="refreshPlugins">刷新</button>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3">
                        <div class="list-group" id="pluginCategories">
                            <a href="#" class="list-group-item list-group-item-action active" data-category="all">所有插件</a>
                            <a href="#" class="list-group-item list-group-item-action" data-category="door-lock">门锁插件</a>
                            <a href="#" class="list-group-item list-group-item-action" data-category="payment">支付插件</a>
                            <a href="#" class="list-group-item list-group-item-action" data-category="integration">第三方集成</a>
                            <a href="#" class="list-group-item list-group-item-action" data-category="report">报表插件</a>
                        </div>
                    </div>
                    
                    <div class="col-md-9">
                        <div id="pluginList">
                            <!-- 门锁插件示例 -->
                            <div class="plugin-card" data-category="door-lock">
                                <div class="d-flex align-items-center mb-3">
                                    <img src="assets/lock-icon.png" alt="门锁图标" class="plugin-icon">
                                    <div>
                                        <h5 class="mb-1">智能门锁插件 A</h5>
                                        <p class="text-muted mb-0">版本: 2.1.3 | 开发商: 智能锁科技</p>
                                    </div>
                                    <div class="ms-auto form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="lockPluginA" data-plugin-id="lock-a">
                                    </div>
                                </div>
                                <p>支持智能门锁A型号的接入和管理，包括远程开锁、权限管理等功能。</p>
                                <div class="d-flex justify-content-end">
                                    <button class="btn btn-sm btn-outline-primary me-2 config-btn" data-plugin-id="lock-a">配置</button>
                                    <button class="btn btn-sm btn-outline-secondary">详情</button>
                                </div>
                                
                                <!-- 配置部分 -->
                                <div class="config-section" id="config-lock-a">
                                    <h6>智能门锁插件 A 配置</h6>
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">服务器地址</label>
                                            <input type="text" class="form-control" value="https://lock-api.example.com">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">API密钥</label>
                                            <input type="password" class="form-control" value="********">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">默认开锁超时(秒)</label>
                                            <input type="number" class="form-control" value="30">
                                        </div>
                                        <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="enableAutoLock" checked>
                                            <label class="form-check-label" for="enableAutoLock">启用自动上锁</label>
                                        </div>
                                        <div class="text-end">
                                            <button type="button" class="btn btn-secondary btn-sm cancel-config">取消</button>
                                            <button type="button" class="btn btn-primary btn-sm">保存</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <!-- 其他插件内容保持不变 -->
                            <div class="plugin-card" data-category="door-lock">
                                <!-- 内容保持不变 -->
                            </div>
                            
                            <div class="plugin-card" data-category="payment">
                                <!-- 内容保持不变 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置标签页 -->
            <div class="tab-pane fade" id="settings" role="tabpanel">
                <!-- 内容保持不变 -->
            </div>
        </div>
    </div>

    <!-- 工作站下载模态框 -->
    <div class="modal fade" id="releaseNotesModal" tabindex="-1" aria-labelledby="releaseNotesModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="releaseNotesModalLabel">工作站软件 v3.5.2 更新日志</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>新功能</h6>
                    <ul>
                        <li>支持多门锁系统集成</li>
                        <li>增加批量办理入住/退房功能</li>
                        <li>优化报表生成速度</li>
                    </ul>
                    <h6>修复问题</h6>
                    <ul>
                        <li>修复了某些情况下数据同步失败的问题</li>
                        <li>解决了高分辨率显示器下界面显示异常的问题</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="downloadWorkstation('windows')">下载最新版本</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 原有的事件处理代码保持不变
            
            // 添加工作站下载相关函数
            window.downloadWorkstation = function(platform) {
                const downloadUrl = platform === 'windows' 
                    ? 'https://example.com/downloads/hotel-workstation-win-v3.5.2.exe'
                    : 'https://example.com/downloads/hotel-workstation-mac-v3.5.2.dmg';
                
                alert(`正在下载工作站软件 (${platform} 版本)...\n下载链接: ${downloadUrl}`);
                // 实际应用中应该使用 window.location.href = downloadUrl; 或其他下载方法
            };
            
            window.showReleaseNotes = function() {
                const releaseNotesModal = new bootstrap.Modal(document.getElementById('releaseNotesModal'));
                releaseNotesModal.show();
            };
        });
    </script>
</body>
</html>